<template>
  <div
    class="title-bar"
    :class="{'bottom-border': hasBottomBorder, noPadding: noPadding}"
  >
    <div class="slot-content">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'TitleBar',
  props: {
    titleText: {
      type: [String, Number],
      default: '模板选择'
    },
    hasBottomBorder: {
      type: [Boolean],
      default: false
    },
    noPadding: {
      type: [Boolean],
      default: false
    }
  },
  data() {
    return {};
  }
};
</script>

<style scoped lang="less">
.title-bar {
  .slot-content {
    width: 100%;
  }
  /* padding: 16px 0 12px 0; */
  height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  h3 {
    font-size: 16px;
    color: #2371c5;
    position: relative;
    padding-left: 10px;
    display: inline-block;
    line-height: 100%;
  }
  h3::before {
    content: '';
    width: 4px;
    height: 16px;
    background: rgba(35, 113, 197, 1);
    position: absolute;
    left: 0;
  }
}
.bottom-border {
  border-bottom: 1px solid #eef0f4;
}
.noPadding {
  padding: 0 !important;
}
</style>
